@use "theme/globals" as *;

:host {
    --badge-image-size: 300px;

    @include media-breakpoint-down(md) {
        --badge-image-size: 200px;
    }

    ion-row {
        justify-content: center;
    }

    ion-col {
        min-width: var(--badge-image-size);
        &.badge-details {
            max-width: var(--list-item-max-width);
        }
    }

    .badge-image-container {
        .badge-image {
            border-radius: 50%;
            width: var(--badge-image-size);
            height: var(--badge-image-size);
        }

        .expireimage {
            content: 'expired';
            position: absolute;
            z-index: 2;
            opacity: .85;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;

            display: flex;
            align-items: center;
            justify-content: center;
            margin: auto;

        }
    }
}
